<style include="common wallpaper">
  wallpaper-grid-item[data-is-time-of-day-wallpaper] {
    --personalization-app-grid-item-border-radius: 40px;
  }
</style>
<main id="main" tabindex="-1"
    aria-label$="[[getMainAriaLabel_(collectionId, collections_)]]">
  <iron-media-query query="(prefers-color-scheme: dark)"
      query-matches="{{isDarkModeActive}}">
  </iron-media-query>
  <template is="dom-if" if="[[tiles_]]">
    <iron-list grid items="[[tiles_]]" role="listbox"
        aria-setsize$="[[tiles_.length]]">
      <template>
        <wallpaper-grid-item
            aria-label$="[[getAriaLabel_(item)]]"
            aria-posinset$="[[getAriaIndex_(index)]]"
            data-is-time-of-day-wallpaper$="[[isTimeOfDayWallpaper_(item)]]"
            disabled="[[isLoadingTile_(item)]]"
            index="[[index]]"
            on-wallpaper-grid-item-selected="onImageSelected_"
            role="option"
            selected="[[isTileSelected_(item, selectedUnitId_, pendingSelectedUnitId_)]]"
            src="[[item.preview]]"
            tabindex$="[[tabIndex]]">
        </wallpaper-grid-item>
      </template>
    </iron-list>
  </template>
  <template is="dom-if" if="[[pendingTimeOfDayWallpaper_]]" restamp>
    <time-of-day-wallpaper-dialog
        on-time-of-day-wallpaper-dialog-accept="onConfirmTimeOfDayDialog_"
        on-cancel="closeTimeOfDayWallpaperDialog_">
    </time-of-day-wallpaper-dialog>
  </template>
</main>
